<template>
  <view class="confirm_page">
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left" style="background-color: #008DFF;">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;color: #FFFFFF;">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;">
          <image style="width: 48rpx;height: 48rpx;"
            src="https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png" mode="" />
        </view>
        订单详情
      </view>
    </view>
    <view style="position: absolute;z-index: 0;left: 0;top: 0;right: 0;">
      <image src="https://taxi.raxan.xyz/wechat/static/images/order_header_20241103.png" style="width: 100%;" mode="" />
    </view>
    <view :style="{ width: '100%', height: recHeight }"></view>
    <view style="height: 96rpx;"></view>
    <view style="position: relative;height: 306rpx;z-index: 1;">
      <view style="position: relative;z-index: 1;margin: 32rpx;">
        <view class="white_blod">{{ getLabel('status') }} ¥{{ getLabel('price') }}</view>
        <view class="white_normal">{{ getLabel('copy_writing') }}</view>
      </view>    
    </view>
    <!-- 主体内容 -->
    <view class="container">
      <view class="desc">
        <view class="board">
          <view class="row_1">
            <image class="thumb" :src="getLabel('type_pic')" />
            <view class="info">
              <view class="name">{{ getLabel('type_name') }}</view>
              <view class="params">{{getLabel('seat_num')}}座/{{ getLabel('door') }}门/{{ getLabel('gear') }}</view>
            </view>
          </view>
          <view class="row_2">
            {{ getLabel('title') }}
            <image class="arrow-right" src="https://taxi.raxan.xyz/wechat/static/images/arrow-right_black.png" />
          </view>
          <view class="row_3">
            <view class="time_info">
              <view class="tag">取车</view>
              <view class="time">{{ formatDate('start_time') }}</view>
            </view>
            <view class="days">{{getLabel('book_day')}}天</view>
            <view class="time_info">
              <view class="tag">还车</view>
              <view class="time">{{ formatDate('end_time') }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="title">其他信息</view>
        <view class="row">
          <view class="label">车辆外观</view>
          <view class="value">{{ getLabel('appearance') }}</view>
        </view>
        <view class="row">
          <view class="label">颜色</view>
          <view class="value">{{ getLabel('color') }}</view>
        </view>
        <view class="row">
          <view class="label">实际承租人</view>
          <view class="value">{{ getLabel('contact_name') }}</view>
        </view>
        <view class="row">
          <view class="label">备注</view>
          <view class="value">{{ getLabel('remark') }}</view>
        </view>
      </view>
      <view class="box">
        <view class="title">订单信息</view>
        <view class="row">
          <view class="label">订单编号</view>
          <view class="value">{{ getLabel('order_no') }}</view>
        </view>
        <view class="row">
          <view class="label">下单时间</view>
          <view class="value">{{ getLabel('add_time') }}</view>
        </view>
        <view class="row">
          <view class="label">费用</view>
          <view class="value">¥{{ getLabel('price')}}</view>
        </view>
      </view>
    </view>
    <template v-if="detail.status_id === 0 || detail.status_id === 99">
      <view class="bottom_bar">
        <view class="cancel_order" @click="orderCancel">取消订单</view>
        <template v-if="detail.status_id === 0">
          <view class="to_pay" @click="submit">立即支付 ¥{{ getLabel('price')}}</view>
        </template>
      </view>
    </template>
  </view>
</template>
<script>
import {
  orderDetail,
  payOrder
} from '@/api/car.js';
export default {
  data() {
    return {
      id: 0,
      recHeight: 0,
      detail: {},
      canecl_reason: '',
      cancel_id: '',
      isLoaded: false,
    }
  },
  onShow() {
    if (this.id) {
      this.orderDetail();
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  },
  onLoad(options) {
    this.id = options.order_id;
    this.getPhoneInfo();
    this.orderDetail();
    setTimeout(() => {
      this.isLoaded = true;
    }, 300)
  },
  methods: {
    addZero(val) {
      return val < 10 ? `0${val}` : val;
    },
    formatDate(key) {
      const time = this.detail[key]
      if (!time) return ''
      const date = new Date(time);
      const mon = this.addZero(date.getMonth() + 1);
      const day = this.addZero(date.getDate());
      const hour = this.addZero(date.getHours());
      const min = this.addZero(date.getMinutes());
      return `${mon}月${day}日 ${hour}:${min}`
    },
    getLabel(field) {
      const val = this.detail[field];
      const isNull = val === undefined || val === null;
      return isNull ? '' : val
    },
    wxplay(data) { //微信支付方法
      let that = this;
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: data.timestamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success() {
          that.is_sumbit = false;
          setTimeout(() => {
            uni.showToast({title: '已提交订单',icon: "none"});
            uni.navigateBack()
          }, 600)
        },
        fail(err) {
          that.is_sumbit = false;
          uni.showToast({title: '订单取消成功',icon: "none"});
        }
      })
    },
    pay() {
      let that = this;
      const { contact_id, id: order_id, pay_type, remark } = this.detail;
      that.is_sumbit = true;
      uni.showLoading();
      payOrder({ order_id, pay_type, contact_id, remark }).then(res => {
        uni.hideLoading()
        that.wxplay(res.data.result.jsConfig)
      }).catch(res => {
        uni.hideLoading()
        that.is_sumbit = false;
        uni.showToast({title: res,icon: "none"})
      }).finally(() => {
        that.is_sumbit = false;
      })
    },
    submit() {
      const that = this;
      if (that.is_sumbit) {
        return uni.showToast({title: '请求过于频繁，请稍后',icon: 'none'});
      }
      uni.showModal({
        title: '提示',
        content: '确定要提交订单吗？',
        success: function (res) {
          if (res.confirm) {
            //提交确认
            uni.showLoading();
            that.is_submit = true;
            that.pay()
          }
        }
      });
    },
    back() {
      uni.navigateBack()
    },
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px';
        }
      });
    },
    checkLoading(fn) {
      this.loading = true;
      uni.showLoading({ title: '加载中' })
      fn().finally(() => {
        this.loading = false;
        uni.hideLoading()
      })
    },
    orderDetail() {
      this.checkLoading(
        () => orderDetail({ id: this.id }).then(res => {
          this.detail = res.data;
          console.log(JSON.parse(JSON.stringify(res.data)))
        })
      )
    },
    orderCancel(){
      const { id: orderId } = this;
      uni.navigateTo({
        url:  `/pages/car_sub/cancel_order/index?order_id=${orderId}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.f_s_18 { font-size: 36rpx; }

.white_blod {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 46rpx;
  color: #FFFFFF;
  line-height: 54rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20rpx;
}

.white_normal {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #FFFFFF;
  line-height: 30rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.bottom_bar {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  padding: 32rpx;
  border-top:  1px solid #E7E7E7;
  box-sizing: border-box;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32rpx;
  .cancel_order, .to_pay {
    line-height: 96rpx;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    border-radius: 12rpx;
  }
  .cancel_order {
    flex: 0 0 220rpx;
    width: 220rpx;
    background-color: #F2F3FF;
    color: #008DFF;
  }
  .to_pay {
    flex: 1;
    color: #FFFFFF;
    background-color: #008DFF;
  }
}

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}



.confirm_page {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  padding-bottom: 180rpx;
  .top_bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    height: 456rpx;
  }
}

.container {
  position: relative;
  z-index: 1;
  padding: 16rpx 32rpx 32rpx 32rpx;
  margin-top: -110rpx;
  .desc {
    margin-bottom: 24rpx;

    .board {
      position: relative;
      z-index: 1;
      margin-top: -22rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 32rpx;
      padding-top: 44rpx;

      .row_1 {
        display: flex;
        gap: 24rpx;

        .thumb {
          width: 230rpx;
          height: 120rpx;
          flex: 0 0 230rpx;
        }

        .info {
          flex: 1;
          overflow: hidden;

          .name {
            margin: 8rpx 0;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 40rpx;
            color: rgba(0, 0, 0, 0.9);
            line-height: 56rpx;
          }

          .params {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);
            line-height: 40rpx;
          }
        }
      }

      .row_2 {
        display: flex;
        margin-top: 24rpx;
        margin-bottom: 18rpx;
        align-items: center;
        justify-content: flex-start;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        height: 48rpx;

        .arrow-right {
          flex: 0 0 36rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }

      .row_3 {
        .time_info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 8rpx;

          .tag {
            padding: 0 8rpx;
            border-radius: 4rpx;
            border: 1rpx solid #008DFF;
            line-height: 40rpx;
            font-size: 24rpx;
            color: #008DFF;
          }

          .time {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.6);
          }
        }

        .days {
          margin: 8rpx 0;
          line-height: 40rpx;
          padding: 0 10rpx;
          background: #F8F9FC;
          border-radius: 8rpx;
          color: #FF5700;
          font-size: 28rpx;
          display: inline-block;
        }
      }
    }
  }

  .box {
    background-color: #FFFFFF;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 28rpx;
    }
    .row {
      overflow: hidden;
      margin-bottom: 28rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.6);
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        float: left;
      }
      .value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.9);
        line-height: 33rpx;
        text-align: right;
        font-style: normal;
        text-transform: none;
        float: right;
      }
    }
  }
}

</style>